<template>

  <div class="supplier_detail">
    <div class="nav_box">
      <van-nav-bar title="供应商详情" right-text="编辑" left-arrow @click-left="router.back()" @click-right="onClickRight">
        <template #right>
          <van-image :src="bianji" class="bianji" />
          编辑
        </template>
      </van-nav-bar>

    </div>
    <div class="content">
      <div class="supplier_detail_top">
        <div class="supplierName">{{ detailInfo.supplierName }}</div>
        <div class="nums">
          <div class="nums_div">
            <div class="nums_number">{{ detailInfo.productsCount }}</div>
            <div class="nums_name">货品总数</div>
          </div>
          <div class="nums_div">
            <div class="nums_number">{{ detailInfo.productsShopping }}</div>
            <div class="nums_name">上架总数</div>
          </div>
          <div class="nums_div">
            <div class="nums_number">{{ detailInfo.productsOpt }}</div>
            <div class="nums_name">选品数</div>
          </div>
        </div>
      </div>
      <div class="supplier_detail_content">
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">商家类型</div>
          <div class="value">{{ detailInfo.supplierType }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">厂家地址</div>
          <div class="value">{{ detailInfo.addr }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">详细地址</div>
          <div class="value">{{ detailInfo.address }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">联系人</div>
          <div class="value">{{ detailInfo.contactName }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">手机号</div>
          <div class="value">{{ detailInfo.phone }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">统一社会信用代码</div>
          <div class="value">{{ detailInfo.companyCode }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">营业执照所在地</div>
          <div class="value">{{ detailInfo.businessAddr }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">营业执照有效期</div>
          <div class="value">{{ detailInfo.businessDate }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">营业执照</div>
          <div class="value">
            <IsImgPdf :url="detailInfo.businessImages" width="90" height="90" />
          </div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">店铺id</div>
          <div class="value">{{ detailInfo.storeId }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder">
          <div class="label">店铺类型</div>
          <div class="value">{{ detailInfo.storeType }}</div>
        </div>
        <div class="supplier_detail_content_div">
          <div class="label">店铺评分</div>
          <div class="value">{{ detailInfo.storeGrade }}</div>
        </div>
        <div class="supplier_detail_content_div supplier_detail_content_divorder flex_down">
          <div class="label">其他资质</div>
          <div class="value flex_wrap_wrap">
            <IsImgPdf v-if="detailInfo.otherImages?.length" v-for="(item, index) in detailInfo.otherImages" width="90"
              height="90" :key="index" :url="item" />
            <IsImgPdf v-else url="" width="90" height="90" />
          </div>
        </div>
      </div>
      <div class="supplier_detail_content">

        <div class="title">合同信息</div>
        <div class="supplier_detail_contract">
          <div class="supplier_detail_content_div supplier_detail_content_divorder" @click="contract('供销合同', sellId)">
            <div class="label">供销合同</div>
            <div class="value" :style="{
              color: sellId.length > 1 ? '#19D11B' : '#B8BECA',
            }">
              {{ sellId.length > 1 ? "已签署" : "未签署"
              }}<van-icon v-if="sellId.length > 1" name="arrow" color="#B8BECA" />
            </div>
          </div>
          <div class="supplier_detail_content_div" @click="contract('破价合同', discountStatusId)">
            <div class="label">破价合同</div>
            <div class="value" :style="{
              color: discountStatusId.length > 1 ? '#19D11B' : '#B8BECA',
            }">
              {{ discountStatusId.length > 1 ? "已签署" : "未签署"
              }}<van-icon v-if="discountStatusId.length > 1" name="arrow" color="#B8BECA" />
            </div>
          </div>
          <div class="supplier_detail_content_div" @click="contract('保证金协议', marginId)">
            <div class="label">保证金协议</div>
            <div class="value" :style="{
              color: marginId.length > 1 ? '#19D11B' : '#B8BECA'
            }">
              {{ marginId.length > 1 ? "已签署" : "未签署"
              }}<van-icon v-if="marginId.length > 1" name="arrow" color="#B8BECA" />
            </div>
          </div>
          <div class="supplier_detail_content_div" @click="contract('补充协议', supplementaryId)">
            <div class="label">补充协议</div>
            <div class="value" :style="{
              color: supplementaryId.length > 1 ? '#19D11B' : '#B8BECA'
            }">
              {{ supplementaryId.length > 1 ? "已签署" : "未签署"
              }}<van-icon v-if="supplementaryId.length > 1" name="arrow" color="#B8BECA" />
            </div>
          </div>
          <div class="supplier_detail_content_div" @click="contract('包销合同', packageStatusId)" v-if="!inventStaffFlag">
            <div class="label">包销合同</div>
            <div class="value" :style="{
              color: packageStatusId.length > 1 ? '#19D11B' : '#B8BECA'
            }">
              {{ packageStatusId.length > 1 ? "已签署" : "未签署"
              }}<van-icon v-if="packageStatusId.length > 1" name="arrow" color="#B8BECA" />
            </div>
          </div>
        </div>
      </div>
      <div class="supplier_detail_content">

        <div class="title" v-if="inventStaffFlag">
          品牌资质
          <van-button plain hairline type="primary" @click="addBrand" size="small">新增品牌</van-button>
        </div>
        <div class="supplier_detail_contract" v-if="inventStaffFlag">
          <div class="supplier_detail_content_div supplier_detail_content_divorder supplier_detail_content_divs"
            v-for="(item, index) in brandList" :key="index" @click="brandClick(item.id)">
            <div class="label">{{ item.brandName }}</div>
            <div class="value" style="color: #0094ff">
              {{ "详情" }}<van-icon name="arrow" color="#B8BECA" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  hmSupplierList,
  getcontractList,
  getbrandList,
} from "@/api/supplierList/index";
const bianji = new URL("@/assets/porduct/bianji.png", import.meta.url).href;
import { getEnvValue } from "@/utils/index";
import { userStore } from "@/store/user";
import IsImgPdf from '@/components/isImgPdf/index.vue'
const route = useRoute();
const router = useRouter();
const detailInfo = ref<any>({});
const user = userStore();
// 是否为研发部新增品牌
const inventStaffFlag = computed(() => {
  return user.user.indexOf('inventStaff') == -1
})
// 供销合同id
const sellId = ref('');
// 破价合同id
const discountStatusId = ref('');
// 保证金协议id
const marginId = ref('')
// 补充协议id
const supplementaryId = ref('')
// 包销合同id
const packageStatusId = ref('')
const brandList = ref<any[]>([]);
/** 商品id */
const uniquekey = computed(() => {
  return route.params.id;
});
/** 获取详情 */
const getDetail = async () => {
  const res = await hmSupplierList({ id: uniquekey.value as any });
  detailInfo.value = res.rows[0];
  if (res.rows[0].businessImage) {
    detailInfo.value.businessImages = getEnvValue("VITE_APP_PIC_URL") + res.rows[0].businessImage
  }
  if (res.rows[0].otherImage) {
    const imgArrs: any[] = []
    res.rows[0].otherImage.split(',').forEach(element => {
      element = getEnvValue("VITE_APP_PIC_URL") + element
      imgArrs.push(element)
    });
    detailInfo.value.otherImages = imgArrs
  } else {
    detailInfo.value.otherImages = []
  }
};
getDetail();
/** 获取品牌列表 */
const getbrand = async () => {
  const res = await getbrandList({ supplierId: uniquekey.value });
  brandList.value = res.rows;
};
getbrand();
/** 获取合同列表 */
const getContract = async () => {
  const res = await getcontractList({
    supplierId: uniquekey.value,
    contractType: "供销合同",
  });
  sellId.value = res.rows[0] ? res.rows[0].id : "";
  const response = await getcontractList({
    supplierId: uniquekey.value,
    contractType: "破价合同",
  });
  discountStatusId.value = response.rows[0] ? response.rows[0].id : "";
  const responseMargin = await getcontractList({
    supplierId: uniquekey.value,
    contractType: "保证金协议",
  });
  marginId.value = responseMargin.rows[0] ? responseMargin.rows[0].id : "";
  const ressupplementaryId = await getcontractList({
    supplierId: uniquekey.value,
    contractType: "补充协议",
  });
  supplementaryId.value = ressupplementaryId.rows[0] ? ressupplementaryId.rows[0].id : "";
  const packageStatusIdList = await getcontractList({
    supplierId: uniquekey.value,
    contractType: "包销合同",
  });
  packageStatusId.value = packageStatusIdList.rows[0] ? packageStatusIdList.rows[0].id : "";
};
getContract();
/** 编辑 */
const onClickRight = () => {
  router.push(`/editSupplier/${uniquekey.value}`);
};
/** 品牌跳转 */
const brandClick = (id) => {
  router.push({
    path: `/brandQualification/${uniquekey.value}`,
    query: { ids: id },
  });
};
/** 新增品牌跳转 */
const addBrand = () => {
  router.push(`/addBrandQualification/${uniquekey.value}`);
};
/** 合同跳转 */
const contract = async (type, status) => {
  if (status) {
    if (type == "供销合同") {
      router.push({
        path: "/contract",
        query: {
          detailInfo: JSON.stringify(detailInfo.value),
          id: sellId.value,
          type: "供销合同",
        },
      });
    } else if (type == "破价合同") {
      router.push({
        path: "/contract",
        query: {
          detailInfo: JSON.stringify(detailInfo.value),
          id: discountStatusId.value,
          type: "破价合同",
        },
      });
    } else if (type == '保证金协议') {
      router.push({
        path: "/contract",
        query: {
          detailInfo: JSON.stringify(detailInfo.value),
          id: marginId.value,
          type: "保证金协议",
        },
      });
    } else if (type == '补充协议') {
      router.push({
        path: "/contract",
        query: {
          detailInfo: JSON.stringify(detailInfo.value),
          id: supplementaryId.value,
          type: "补充协议",
        },
      });
    } else if (type == '包销合同') {
      router.push({
        path: "/contract",
        query: {
          detailInfo: JSON.stringify(detailInfo.value),
          id: packageStatusId.value,
          type: "包销合同",
        },
      });
    }
  }
};
</script>
<style lang="less" scoped>
.supplier_detail {
  width: 100%;
  background-color: #f6faff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  padding-top: 90px;

  .nav_box {
    height: 90px;
    width: 100vw;
    box-sizing: border-box;
    padding-top: 44px;
    background: linear-gradient(0deg, #FFFFFF 0%, #CDECFF 100%);
    position: fixed;
    z-index: 3000;
    top: 0;
  }

  .content {
    width: 100%;
    height: calc(100% - 46px);
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    align-content: flex-start;
    padding: 15px;
  }

  .bianji {
    width: 12px;
    height: 12px;
    margin-right: 3px;
  }

  :deep .van-nav-bar__right {
    color: #0094ff;
    font-size: 13px;
    display: flex;
    align-items: center;
  }

  .supplier_detail_top {
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .supplierName {
      width: 100%;
      height: 40px;
      background: url('@/assets/newui/supplier/icon_gongyingshangxiangqing@2x.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding-left: 15px;
      font-weight: 600;
      font-size: 16px;
      color: #0094FF;
      line-height: 40px;
      text-align: left;
      font-style: normal;
    }

    .nums {
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 14px;
      justify-content: space-between;
      background: linear-gradient(180deg, #FFFFFF 0%, #EBF4FF 100%);

      .nums_div {
        text-align: center;
        width: 0;
        flex: 1;

        .nums_name {
          font-weight: 400;
          font-size: 14px;
          color: #8492AD;
          line-height: 14px;
          margin-top: 10px;
        }

        .nums_number {
          font-weight: 500;
          font-size: 18px;
          color: #1A1B1C;
          line-height: 18px;
        }
      }

      .nums_line {
        width: 1px;
        height: 14px;
        background-color: #E5EDFC;
      }

      .line {
        height: 100%;
        border: 1px solid #bbbbbb;
      }
    }
  }

  .supplier_detail_content {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 13px;
    padding: 0 15px;

    .supplier_detail_content_divorder {
      border-bottom: 1px solid #F3F3FF;
    }
    
    
    
    .supplier_detail_content_div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0px;

      :deep .van-icon {
        margin-left: 0% !important;
      }

      .label {
        min-width: 55px;
        font-weight: 400;
        font-size: 14px;
        color: #464E5D;
        line-height: 14px;
        text-align: left;
        font-style: normal;
      }

      .van-image {
        width: 90px;
        height: 90px;
      }

      .value {
        max-width: calc(100% - 85px);
        display: flex;
        justify-content: right;
        word-break: break-all;
        font-weight: 400;
        font-size: 14px;
        color: #1A1B1C;
        line-height: 14px;
        font-style: normal;
        text-transform: lowercase;
      }

      .flex_wrap_wrap {
        flex-wrap: wrap;
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .title {
    width: 100%;
    margin: 15px 0;
    font-weight: 600;
    font-size: 18px;
    color: #1A1B1C;
    line-height: 18px;
    position: relative;

    &::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 18px;
      background: linear-gradient(0deg, #FFFFFF 0%, #0094FF 100%, #0094FF 100%);
      border-radius: 2px;
      margin-right: 10px;
      transform: translateY(3px);
    }

    .van-button {
      width: 76px;
      height: 24px;
      position: absolute;
      right: 0;
      top: -2px;
      font-weight: 400;
      font-size: 14px;
      color: #0094FF;
      line-height: 14px;

    }

  }


  .supplier_detail_contract {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 13px;

    .supplier_detail_content_divs {
      .value {
        min-width: 60px;
      }
    }

    .supplier_detail_content_div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #F3F3FF;

      .value {
        color: #b8beca;
      }
    }
  }

  :deep .van-nav-bar {
    background-color: #1466ff00;
    height: 46px !important;
    width: 100%;
    position: fixed;
  }

  :deep .van-nav-bar__content {
    background-color: #1466ff00;
  }

  :deep .van-nav-bar__title {
    color: #000;
  }

  :deep .van-nav-bar__title {
    color: #000;
  }

  :deep .van-nav-bar__text {
    color: #0094ff;
  }

  :deep .van-icon {
    margin-left: 5px;
  }
}
.flex_down{
  align-items: flex-start !important;
  flex-direction: column !important;

  .value {
    margin-top: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    display: flex;
    word-break: break-all;
    font-weight: 400;
    font-size: 14px;
    color: #1A1B1C;
    line-height: 14px;
    font-style: normal;
    text-transform: lowercase;
  }
}
</style>
